<template>
  <div>
    <van-nav-bar
      :title="id_categories.name"
      left-text=""
      left-arrow
      @click-left="onClickLeft()"
    />
    <van-row type="flex" justify="center">
    <van-image fit="contain" :src="'/'+id_categories.img"></van-image>
    </van-row>
    <van-card 
  :title="id_categories.name"
  :desc="id_categories.author"
  :price="id_categories.price">
  <template #tags>
    <van-tag plain type="danger">{{id_categories.publisher}}</van-tag><br>
    <van-tag type="danger">{{category}}</van-tag> 
  </template>
  </van-card>
      <p v-html='id_categories.description' ></p>
    <div>
        
     
        <div v-if="det==true">
          <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
          <van-goods-action-button type="danger"  text="取消收藏" @click="remove()"/>
          </van-goods-action>
        </div>
        <div v-if="det==false">
          <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button type="info"  text="加入收藏" @click="add()"/>
        </van-goods-action>
        </div>
        
     
    </div>
  </div>
</template>
<script>
import network from '../network';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      id_categories:[],
      id:this.$route.params.id,
      category_id:this.$route.params.category_id,
      category:[],
      det:"",//判断是否有被收藏
      
    };
  },

  created: function () {
    let self = this;
      network.get_newpage(self.id)
      .then(function (response) {
        self.id_categories = response.data;
      });
        network.get_category_by_id(self.category_id)
         .then(function(response1) {
          self.category = response1.data;
        });
        if(localStorage.getItem("token")!=null)
        {
          network.getcollect(self.id,localStorage.getItem("user_id"))
         .then(function(response1) {
          self.det = response1.data;
             
        });
              
        }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    add()
    {
      if(localStorage.getItem("token")!=null)
      {
         network.add(localStorage.getItem("user_id"),this.id);
          this.det=true;
      }
     else if(localStorage.getItem("token")==null)
     {
        Dialog.confirm({
        message: '尚未登录',
       
        confirmButtonText:'前往登录',
        cancelButtonText:'下次再说',
        })
        .then(() => {
          this.$router.push("/login");
        })
        .catch(() => {
          
         });
    }
             
    },
    remove()
    {
       network.remove(localStorage.getItem("user_id"),this.id);
          this.det=false;
    }
  
  },
};
</script>